<template>
  <div>
    <el-empty v-show="!tableData.length" description="暂无数据"></el-empty>
    <div class="steps-wrap">
      <el-steps :active="active" align-center finish-status="success">
        <el-step
          v-for="v in tableData"
          :key="v.id"
          :title="v.name"
          :description="flowDescription(v)"
          @click.native="handleClick(v)"
        ></el-step>
      </el-steps>
    </div>
    <h2 class="history-list-title" v-show="tableData.length">
      <span class="iconfont icon-nav"></span>审核详情：
    </h2>
    <div
      class="historyList"
      ref="course-wrap"
      :style="{ height: wrapHeight + 'px' }"
    >
      <ul v-for="v in historyList" :key="v.id">
        <li class="node-name">
          <b><span class="el-icon-caret-right"></span> {{ v.name }} </b>
          <span
            @click="handleToggle(v)"
            :class="[
              'node-name-icon',
              'el-icon-arrow-down',
              { hot: idArr.indexOf(v.id) != -1 },
            ]"
          ></span>
        </li>
        <li class="node-wraper">
          <el-collapse-transition>
            <div class="node-wraper-in" v-show="idArr.indexOf(v.id) == -1">
              <el-empty
                v-show="!v.flowHisTaskList.length"
                description="暂无数据"
              ></el-empty>
              <!-- 审核列表 -->
              <AuditList :data="v.flowHisTaskList" />
              <!-- 评审列表 -->
              <ReviewList :data="v.expertsTaskList" />
            </div>
          </el-collapse-transition>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  components: {
    AuditList: () => import('./auditList.vue'),
    ReviewList: () => import('./reviewList.vue'),
  },
  data() {
    return {
      wrapHeight: 500,
      active: 1,
      historyList: [],
      idArr: [],
      idArrTwo: [],
      curCourse: {},
    }
  },
  props: ['tableData'],
  computed: {
    flowDescription() {
      return (v) => {
        if (v.step == -1) {
          return ''
        }
        if (v.auditorList.length > 1 && v.auditRelation == 'and') {
          return v.auditor + '（都需要审核）'
        } else if (v.auditorList.length > 1 && v.auditRelation == 'or') {
          return v.auditor + '（任一人审核即可）'
        } else {
          return v.auditor
        }
      }
    },
  },
  mounted() {
    this.getList()
    this.curCourse = this.$store.getters.curCourse || {}
  },
  methods: {
    init() {
      let wHeight = document.body.clientHeight
      if (!this.$refs['course-wrap']) return
      let topDistance = this.$refs['course-wrap'].getBoundingClientRect().top
      this.wrapHeight = wHeight - topDistance - 45
    },
    getList() {
      this.historyList = this.tableData.filter(
        (v) => v.flowHisTaskList && v.flowHisTaskList.length > 0,
      )
      this.historyList.forEach((v) => {
        this.idArrTwo.push(v.flowHisTaskList[0].id)
      })
      let cur = this.tableData.filter((v) => v.isCurrent == 2)[0]
      this.active = this.tableData.indexOf(cur)
      if (this.active == -1) {
        this.active = this.tableData.length
      }
      this.$nextTick(() => {
        this.init()
      })
    },
    handleToggle(v) {
      let idx = this.idArr.indexOf(v.id)
      if (idx == -1) {
        this.idArr.push(v.id)
      } else {
        this.idArr.splice(idx, 1)
      }
    },
    handleClick(v) {
      if (v.step == -1) {
        this.historyList = this.tableData.filter(
          (v) => v.flowHisTaskList.length > 0,
        )
      } else {
        this.historyList = []
        this.historyList.push(v)
      }
    },
  },
}
</script>
<style scoped lang="scss">
.steps-wrap {
  padding: 20px 0;
  background-color: #f4f4f4;
}
.history-list-title {
  margin-top: 20px;
  font-size: 16px;
  font-weight: normal;
  line-height: 36px;
  border-bottom: 1px solid #eee;
  span {
    color: #333;
    margin: 0 5px;
    font-weight: bold;
  }
}
.historyList {
  overflow-y: scroll;
  .node-name {
    position: relative;
    padding-left: 0;
    color: #fff;
    line-height: 44px;
    background-color: #e8e8e8;
    b {
      position: relative;
      display: inline-block;
      height: 100%;
      padding: 0 40px 0 20px;
      background: #e8971c;
      &::after {
        position: absolute;
        right: -44px;
        top: 0;
        content: '';
        width: 0;
        height: 0;
        border: 22px solid transparent;
        border-bottom-color: #e8971c;
        border-left-color: #e8971c;
      }
    }
    span {
      font-weight: bold;
    }
    .node-name-icon {
      position: absolute;
      right: 10px;
      top: 10px;
      color: #bbb;
      font-size: 20px;
      cursor: pointer;
      transition: all 0.3s;
      &.hot {
        transform: rotate(-90deg);
      }
    }
  }
}
.historyList > ul {
  margin: 20px 0;
  border: 1px solid #e8e8e8;
}
.historyList .node-wraper {
  line-height: 24px;
  .node-wraper-in {
    padding: 0 20px 20px 20px;
  }
  &:nth-child(2) .node-info {
    border-top: 0 none;
  }
}
</style>
<style scoped>
.steps-wrap >>> .el-step.is-center .el-step__head {
  line-height: 24px;
}
</style>